// Color Palette
@white: #fff;
@gray-2: #f2f3f5;
@gray-5: #c8c9cc;
@red: #ee0a24;
@blue: #1989fa;
// Font
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-weight-bold: 500;
@line-height-xs: 14px;
// Padding
@padding-base: 4px;
@padding-sm: @padding-base * 3;
// Border
@border-radius-md: 4px;

// Calendar
@calendar-background-color: @white;
@calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.1);
@calendar-header-title-height: 44px;
@calendar-header-title-font-size: @font-size-lg;
@calendar-header-picker-font-size: @font-size-md;
@calendar-weekdays-height: 30px;
@calendar-weekdays-font-size: @font-size-sm;
@calendar-month-title-font-size: @font-size-md;
@calendar-month-mark-color: fade(@gray-2, 60%);
@calendar-month-mark-font-size: 160px;
@calendar-day-height: 44px;
@calendar-day-font-size: @font-size-lg;
@calendar-selected-day-size: 34px;
@calendar-selected-day-color: @white;
@calendar-info-font-size: @font-size-xs;
@calendar-info-bottom-color: @blue;
@calendar-info-line-height: @line-height-xs;
@calendar-selected-day-background-color: @blue;
@calendar-day-disabled-color: @gray-5;
@calendar-day-info-width: 80%;

.calendar {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: @calendar-background-color;

    &__header {
        flex-shrink: 0;
        box-shadow: @calendar-header-box-shadow;
        display: flex;
        justify-content: space-between;

        &-control {
            display: flex;
            align-items: center;
            padding: 0 16px;

            .van-button {
                border: none !important;
                width: 44px;
                height: 44px;
            }

        }
    }

    &--sticky {
        padding-top: 44px;
        .calendar__header {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            z-index: 1;
            background-color: @calendar-background-color;
        }
    }

    &__picker {

        display: flex;
        align-items: center;

        &-value {
            padding: 0 @padding-sm;
            font-size: @calendar-header-picker-font-size;
            display: inline-flex;
        }
    }

    &__month-title,
    &__header-title {
        height: @calendar-header-title-height;
        font-weight: @font-weight-bold;
        line-height: @calendar-header-title-height;
        text-align: center;
    }

    &__header-title {
        font-size: @calendar-header-title-font-size;
    }

    &__month-title {
        font-size: @calendar-month-title-font-size;
    }

    &__weekdays {
        display: flex;
    }

    &__weekday {
        flex: 1;
        font-size: @calendar-weekdays-font-size;
        line-height: @calendar-weekdays-height;
        text-align: center;
    }

    &__body {
        flex: 1;
        margin: 0;

        &:root {
            --square-width-percent: @calendar-day-info-width;
        }
    }


    &__month {
        padding: 10px 0;

        &-mark {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 0;
            color: @calendar-month-mark-color;
            font-size: @calendar-month-mark-font-size;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
    }

    &__days {
        position: relative;
        display: flex;
        flex-wrap: wrap;
    }

    &__day {
        width: 14.285%;
        font-size: @calendar-day-font-size;
        display: flex;
        justify-content: center;

        &-wrap {
            position: relative;
            width: var(--square-width-percent);

            &::after {
                padding-top: 100%;
                content: '';
                display: block;
            }
        }
    }

    &__info {
        position: absolute;
        left: 5%;
        top: 5;
        width: 90%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        &-bottom {
            font-size: @calendar-info-font-size;
            line-height: 1;
            height: 10px;
            color: @calendar-info-bottom-color;
            white-space: nowrap;
        }

        &-badge {
            position: absolute;
            right: 10%;
            top: 10%;
            width: 5px;
            height: 5px;
            border-radius: 5px;
            background: @red;
        }

    }

    &__selected-day {
        color: @calendar-selected-day-color;
        background-color: @calendar-selected-day-background-color;
        border-radius: @border-radius-md;

        .calendar__info-badge {
            background: @calendar-selected-day-color;
        }

        .calendar__info-bottom {
            color: @calendar-selected-day-color;
        }
    }

    &__prev-day,
    &__next-day,
    &__disabled-day {
        color: @calendar-day-disabled-color;

        .calendar__info-badge {
            display: none;
        }

        .calendar__info-bottom {
            color: @calendar-day-disabled-color;
        }
    }
}